<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
     html {
       overflow-x: hidden;
     }
    html,body {
      background-color: rgb(212, 201, 201);
    }
    a {
      text-decoration: none;
      cursor: pointer;
      color: inherit;
      user-select: none;
    }
    li {
      list-style: none;
    }
    .header {
      position: relative;
      background-color: #efefef;
    }
    .masthead {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    .masthead .logo {
      margin: 15px;
      padding: 6px 10px;
      background-color: #e92b2b;
      border-radius: 4px;

    }
    .masthead .toggle {
      margin-right: 15px;
      padding: 2px 10px;
      background-color: #666666;
      line-height: 1;
      font-size: 30px;
      font-weight: 100;
      border-radius: 4px;
      
    }
    .masthead .nav {
      position: absolute;
      top: 100%;
      right: -150px;
      width: 150px;
      background-color: #fff;
    }
    .masthead .nav li {
      padding: 0 15px;
    }
    .masthead .nav li a {
      display: block;
      height: 100%;
      padding: 10px 0;
      border-bottom: 2px solid transparent;
    }
    .masthead .nav li a:hover, 
    .masthead .nav li a.active {
      color: red;
    }
    .masthead .nav li a.active {
      border-bottom-color: red;
    }
    @media screen and (min-width:768px) {
      .masthead .nav {
        position: static;
        width: auto;
        background-color: transparent;
      }
      .masthead .nav {
        display: flex !important;
      }
      .masthead .toggle {
        display: none;
      }     
    }
  
  </style>
</head>
<body>
  <div class="header">
    <div class="masthead">
      <a class="logo">标志</a>
      <a class="toggle">≡</a>
      <ul class="nav">
        <li><a href="#" class="active">网站首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品中心</a></li>
        <li><a href="#">下载中心</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div> 
  </div>
  <div style="height: 200px; background-color: #bbb;"></div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var arrive = false;
    $('.toggle').click(function(){
      arrive = !arrive;
      $(this).next('.nav').animate({
        right: arrive?15:-150,
      },300);
    });
    $('.nav').on('click','li',function () {
      $(this).children('a').addClass('active').end().siblings().children('a').removeClass('active');
    })
  </script>
</body>
</html>